<template>
	<view class="dramaBoxOut">
		<view class="dramaBox">
			<view class="userTitle">{{userTitle}}</view>
			<view class="userDes">{{userDes}}</view>
			<image src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/ks_follow.gif" class="poster"></image>
			<view style="font-size: 32rpx;margin-top: 10rpx;margin-bottom: 28rpx;" class="clamp">{{title}}</view>
			<button
				@click="userLockClick"
				:plain="true"
				hover-class="none"
				style="border: 0px solid #000000;color: white;padding: 0;width: 386rpx;height: 80rpx;background-color: transparent;box-shadow: rgba(0,0,0,0.1) 0 0 0 0px inset;margin: 0;"
				class="sideBarItem"
				aria-role="button"
				open-type="openProfile" 
				:user="userLockId"
			>
				<view class="isBtn">{{userBtn}}</view>
			</button>
		</view>
	</view>
</template>

<script>

export default {
	components: {  },
	name: '',
	props: {
		title:{},
		userLockId:{},
		nowItem:{}
		
	},
	data() {
		return {
			userTitle:'关注官方服务号',
			userDes:'关注服务号后您可继续看以下内容',
			userBtn:'立即关注'
		};
	},
	methods: {
		userLockClick(){
			getApp().globalData.notSetWatchWord = true;
			setTimeout(()=>{
				console.log('userLockClick');
				this.$emit('userLockBtnClick');
			},1666)
		}
	},
	onLoad() {
	},
	onReady() {
		console.log('onReady');
		this.$uma && this.$uma.trackEvent('Ume_ServiceNumber', {
			name: 'Ume_SN_pop_up_PV'
		});
		this.getConfig().then(res => {
			console.log('postActiveConfig', res);
			if(res.userTitle) this.userTitle = res.userTitle;
			if(res.userDes) this.userDes = res.userDes;
			if(res.userBtn) this.userBtn = res.userBtn;
		});
	}
};
</script>

<style lang="scss">
	.dramaBoxOut{
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background-color: #00000070;
		z-index: 77;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.userTitle{
		font-size: 38rpx;
		color: #3D270B;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	.userDes{
		font-size: 28rpx;
		color: #999999;
	}
	.poster{
		margin-top: 32rpx;
		width: 313.5rpx;
		height: 277rpx;
		border-radius: 13rpx;

	}
	.isBtn{
		width: 386rpx;
		height: 80rpx;
		background: #F66E8E;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 43rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
	.dramaBox{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: white;
		border-radius: 20rpx;
		width: 550rpx;
		height: 660rpx;
		// position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 55;
	}
</style>
